<template>
  <div>
    <header>
      <div class="div">
        <img src="../../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span v-show="delShow === false">添加咨询人</span>
        <span v-show="delShow === true">编辑被服务人</span>
      </div>
      <div class="div">
        <span class="solid" v-show="delShow" @click="peopleDelete()">删除</span>
      </div>
    </header>
    <ul class="ulList">
      <li>
        <span class="li_label">姓名</span>
        <span class="li_input">
            <input type="text" v-model="PATIENT_NAME"  placeholder="请填写咨询人姓名">
        </span>
      </li>
      <li>
        <span class="li_label">身份证号</span>
        <span class="li_input">
            <input type="text" v-model="ID"  placeholder="请填写咨询人身份证号">
        </span>
      </li>
      <li>
        <span class="li_label">手机号码</span>
        <span class="li_input">
            <input type="number" v-model="PHONE" placeholder="请填写手机号码">
        </span>
      </li>
      <li>
        <span class="li_label">关系</span>
        <span class="li_input">
          <button
            :class="[TIPS == item.id ? 'select' : 'noSelect']"
            @click="TIPS = item.id"
            v-for="(item, index) in btnList" :key="index"
          >{{item.name}}</button>
<!--          <button>子女</button>-->
<!--          <button>父母</button>-->
<!--          <button>其他</button>-->
        </span>
      </li>
    </ul>
    <button class="saveBtn" @click="saveData()">保存</button>
    <van-dialog v-model="popShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认删除该被服务人吗？"
                @confirm="delConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'AddPeople',
  data () {
    return {
      btnList: [
        {
          name: '配偶',
          id: 1
        },
        {
          name: '子女',
          id: 3
        },
        {
          name: '父母',
          id: 2
        },
        {
          name: '其他',
          id: 4
        }
      ],
      TIPS: 1,
      PATIENT_NAME: '',
      ID: '',
      PHONE: '',
      PATIENT_ID: '',
      delShow: false,
      popShow: false
    }
  },
  mounted () {
    if (sessionStorage.getItem('peopleInfo') !== null) {
      var data = JSON.parse(sessionStorage.getItem('peopleInfo'))
      this.TIPS = data.TIPS
      this.PATIENT_NAME = data.PATIENT_NAME
      this.ID = data.ID
      this.PHONE = data.PHONE
      this.PATIENT_ID = data.PATIENT_ID
      this.delShow = true
    }
  },
  methods: {
    // 删除确认按钮
    delConfirm () {
      this.$http.deletePatient({PATIENT_ID: this.PATIENT_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            sessionStorage.removeItem('peopleInfo')
            this.$router.history.go(-1)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 删除按钮 展示弹窗
    peopleDelete () {
      this.popShow = true
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 保存 修改
    saveData () {
      // TIPS: 1,
      //   PATIENT_NAME: '',
      //   ID: '',
      //   PHONE: '',
      if (this.PATIENT_NAME === '' || this.PATIENT_NAME === null || this.PATIENT_NAME === undefined) {
        Toast('请输入姓名')
        return false
      }
      if (this.ID === '' || this.ID === null || this.ID === undefined) {
        Toast('请输入身份证号码')
        return false
      }
      if (this.PHONE === '' || this.PHONE === null || this.PHONE === undefined) {
        Toast('请输入电话号码')
        return false
      }
      this.$http.savePatient({
        PATIENT_NAME: this.PATIENT_NAME, // 姓名
        ID: this.ID, // 身份证号
        PHONE: this.PHONE, // 电话
        TIPS: this.TIPS, // 标签 0本人 1配偶 2父母 3子女 4其他
        PATIENT_ID: this.PATIENT_ID
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            // sessionStorage.setItem('peopleInfo', JSON.stringify(res.data.data))
            sessionStorage.removeItem('peopleInfo')
            this.$router.history.go(-1)
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-family: "PingFang SC";
    border-bottom: 1px solid #E5E5E5;
  }
  .div{
    width: 33%;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:nth-child(3){
    justify-content: flex-end;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .solid{
    color: #1DA4F2;
  }
  .ulList{
    width: 100%;
    background: white;
    padding:  0 15px;
    box-sizing: border-box;
  }
  .ulList li{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;
  }
  .li_label{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .li_input img{
    width: 13px;
    height: 7px;
  }
  .li_input input{
    /*width: 110px;*/
    text-align: right;
    border: none;
    font-size: 15px;
  }
  .li_input button{
    width: 50px;
    height: 25px;
    background: white;
    border: 1px solid #E5E5E5;
    border-radius: 15px;
    margin-left: 5px;
    font-size: 13px;
  }
  .noSelect{
    background: white;
    color: #333333;
  }
  .select{
    color: #fff !important;
    background: #1DA4F2 !important;
  }
  .saveBtn{
    width: 95%;
    height: 44px;
    border-radius: 22px;
    border: none;
    margin: 0 2%;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    position: fixed;
    bottom: 60px;
    color: white;
    font-family: "PingFang SC";
    font-size: 17px;
    font-weight: bold;
  }
</style>
